<template>
<div>
  <van-nav-bar title="密码找回" />
  <div>
    <van-image
        round
        width="6rem"
        height="6rem"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
  </div>
  <div>
    <van-cell-group inset>

      <van-field
          v-model="user.phone"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
      >
      </van-field>
      <van-field
          v-model="user.code"
          center
          clearable
          @change="checkCode"
          label="验证码"
          placeholder="请输入验证码"
      >
        <template #button>
          <van-button size="small" type="primary" @click="sendCode" :disabled="btndisabled">{{btnmsg}}</van-button>
        </template>
      </van-field>
      <van-field
          v-model="user.pass"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="user.password2"
          type="password"
          name="确认密码"
          label="确认密码"
          :disabled="passflag"
          placeholder="请再次输入密码"
          @change="checkPass"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="button" @click="find" :disabled="btn">
        密码找回
      </van-button>
    </div>
  </div>
  <div style="color: #888888;font-size: 10px">
    <div style="float: left;margin-left: 20px">
      没有账号<router-link to="/register">点击注册</router-link>
    </div>
    <div style="float: right;margin-right: 20px">
      已有账号<router-link to="/login">点击登录</router-link>
    </div>
  </div>
</div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from 'vue-router'
import axios from "axios";
const router = useRouter()
const user=new ref({})
const btn=new ref(true)
const passflag=new ref(true)

const btndisabled=new ref(false)
const btnmsg=new ref("发送验证码")
const btnnum=new ref(60)

const sendCode = () => {
  //发送验证码
  axios.get("sms/sendfcode?phone="+user.value.phone).then(res=>{
    if(res.data.code==0){

      //发送成功
      passflag.value=false;
      btndisabled.value=true;
      btnmsg.value="重新发送("+btnnum.value+"秒)";
      //定时任务
      var t=setInterval(()=>{
        if(btnnum.value>1){
          btnnum.value--;
          btnmsg.value="重新发送("+btnnum.value+"秒)";
        }else {
          //停止计时
          btnnum.value=60;
          btnmsg.value="重新发送验证码";
          btndisabled.value=false;
          //停止定时任务
          clearInterval(t)
        }
      },1000);
    }
  })
}
const checkPass = () => {
  //校验2次密码要求一致
  if(user.value.password2.length>=6&&user.value.password2===user.value.pass){
    btn.value=false;
  }
}

const find = () => {
  //密码找回
  axios.post("user/findpass",user.value).then(res=>{
    if(res.data.code==0){
      //跳转 登录页面
      router.push("/login");
    }else {
      alert(res.data.data);
    }
  })
}
</script>

<style scoped>

</style>
